<template>
	<view class="home">
		<!-- #ifdef MP -->
		<search-slot>
			<template #left>
				<view class="search-left">
					<view class="iconfont icon-xiaoxi icon-size"></view>
				</view>
			</template>
			<template #center>
				<view class="search-center flex-1 m-1" @click="goSearch">
					请输入搜索内容
				</view>
			</template>
			<template #right>
				<view class="search-right" @click="getScan">
					<view class="iconfont icon-saoma icon-size"></view>
				</view>
			</template>
		</search-slot>
		<!-- #endif -->
		<view class="">
			{{address}}
		</view>
		<scroll-view scroll-x="true" :scroll-into-view="scrollinto" scroll-with-animation :scroll-left="scrollLeft">
			<!-- <view class="title-wrapper">
			  	 <view v-for="(item,index) in navbars" :key="index" class="title-view mx-1">{{item.name}}</view>
			  </view> -->
			<view class="title-container d-flex">
				<view v-for="(item,index) in navbars" ref="tabTop" :key="index" :id="'tab'+index"
					class="mx-2 flex-shrink tabTopItem" :class="currentIndex==index?'active':''"
					@click="changeTitle(index)">{{item.name}}</view>
			</view>
		</scroll-view>
		<swiper :style="'height:'+scrollH" :current="currentIndex" @change="changeTab">
			<swiper-item v-for="(newItem,i) in newItems" :key="i">
				<view class="swiper-item" :style="'height:'+scrollH">
					<scroll-view scroll-y="true" :style="'height:'+scrollH" @scrolltolower="scrollToLower(i)">
						<template v-if="newItem.list.length>0">
							<block v-for="item in newItem.list" :key="item.id">
								<template v-if="item.type == 'swiper'">
									<swiper-banner :swipers="item.data" :height="350" :bool="false"></swiper-banner>
								</template>
								<template v-else-if="item.type=='indexnavs'">
									<fast-nav :pagges="pagges"></fast-nav>
								</template>
								<template v-else-if="item.type=='threeAdv'">
									<three-adv :news="item.data"></three-adv>
									<divider></divider>
								</template>
								<template v-else-if="item.type=='oneAdv'">
									<one-adv :title="item.data.title" :cover="item.data.cover">
									</one-adv>
								</template>
								<template v-else-if="item.type=='list'">
									<common-list :news="item.data"></common-list>
								</template>
							</block>
							<view class="my-2 text-center text-muted">{{newItem.loadmore}}</view>
						</template>
						<template v-else-if="newItem.forward=='before'">
						  <view class="text-center text-muted my-2">
						  	 加载中…
						  </view>
						</template>
						<template v-else>
						   <view class="text-center text-muted my-2">
						   	暂无数据
						   </view>
						</template>
					</scroll-view>
				</view>
			</swiper-item>
		</swiper>
		<sk-index v-if="loading"></sk-index>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance,
		computed
	} from 'vue'
	import {
		onLoad,
		onNavigationBarSearchInputClicked,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app'
	import {
		getHome,
		getPage
	} from '../../api/index.js'
	var QQMapWX = require('../../static/qqmap-wx-jssdk.min.js');
	var title = ref('web2420shop')
	var currentIndex = ref(0)
	var scrollinto = ref('')
	var totalWidth = ref(0) //标题的总长度
	var itemWidth = ref(0) //每个item的宽度
	var scrollLeft = ref('')
	var scrollH = ref('')
	var newItems = ref([]) //包含了所有的标题下面的数据
	var qqmapsdk = ''
	var address = ref('')
	var loading = ref(true)
	const instance = getCurrentInstance();
	const query = uni.createSelectorQuery().in(instance.proxy);
	var tabTop = ref()
	var navbars = ref([])
	//跳转到搜索页
	const goSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	//扫码
	const getScan = () => {
		uni.scanCode({
			success: (res) => {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);

			}
		});
	}
	//监听原生标题栏搜索框点击
	onNavigationBarSearchInputClicked(() => {
		console.log('onNavigationBarSearchInputClicked')
	})
	//监听原生标题栏按钮点击事件
	onNavigationBarButtonTap((e) => {
		console.log('1111111111111111', e);
	})
	//点击切换标题
	const changeTitle = (index) => {
		currentIndex.value = index
		scrollinto.value = 'tab' + index
		scrollLeft.value = itemWidth.value * index - 100
		console.log('scrollLeft.value', scrollLeft.value);
	}
	//滑动首页切换标题
	const changeTab = (e) => {
		console.log('eee', e);
		currentIndex.value = e.detail.current;
		scrollinto.value = 'tab' + currentIndex.value
		scrollLeft.value = itemWidth.value * currentIndex.value - 100
		if (newItems.value[currentIndex.value].forward == 'before') {
			getpage()
		} else {
			return;
		}
	}
	//请求首页收据
	const gethome = () => {
		getHome().then(res => {
			console.log('ressss', res);
			navbars.value = res.data.category
			for (var i = 0; i < navbars.value.length; i++) {
				var forward = i == 0 ? 'after' : 'before'
				let obj = {
					list: [],
					forward: forward,
					loadmore: '加载更多…'
				}
				if (i == 0) {
					obj.list = res.data.data
				}
				newItems.value.push(obj)
				console.log('newItems', newItems);
				loading.value = false;
			}
		})
	}
	//接受首页指定分类下数据
	const getpage = (callback = false) => {
		let index = currentIndex.value;
		let id = navbars.value[index].id;
		let obj = newItems.value[index];
		let page = Math.ceil(obj.list.length / 5) + 1
		if (page == 1) {
			obj.forward = 'before'
		}
		getPage(id, page).then(res => {
			console.log('res2222222', res);
			let data = res.data;
			obj.list = [...obj.list, ...data]
			obj.loadmore = data.length < 5 ? '没有更多了…' : '加载更多…'
			obj.forward = 'after'
		})
		if (typeof callback == 'function') {
			callback()
		}
	}
	//金刚区
	const pagges = computed(() => {
		let pagge = []
		let index = currentIndex.value;
		let obj = newItems.value[index];
		obj.list.forEach((item) => {
			if (item.type == 'indexnavs') {
				let indexnav = Object.values(item.data)
				indexnav.map((v, i) => {
					// [0,1,2,3,4,5,6,7,8,9]
					// [[0,1,2,3,4,5,6,7],[8,9]]
					let p = Math.floor(i / 8) //索引
					if (!pagge[p]) {
						pagge[p] = [] //认为他是一个数组
					}
					pagge[p].push(v)
				})
			}
		})
		console.log('pagge=>', pagge);
		return pagge;
	})
	//监听触底
	const scrollToLower = (i) => {
		// 1.加载更多…  2.加载中…  3.没有更多了…
		let obj = newItems.value[i]
		if (obj.loadmore != '加载更多…') {
			return;
		} else {
			obj.loadmore = '加载中…'
			getpage(() => {
				uni.showToast({
					title: '加载成功'
				})
			})


		}
	}
	onLoad(() => {
		uni.getSystemInfo({
			success: (res) => {
				scrollH.value = res.windowHeight - uni.upx2px(178) + 'px'
				console.log('scrollH.value', scrollH.value);
			}
		})
		qqmapsdk = new QQMapWX({
			key: 'NJNBZ-XS33X-WOM4O-ZLIG5-POXA3-ILFJC'
		});
	})
	onMounted(() => {
		gethome()
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: res.latitude,
						longitude: res.longitude
					},
					success: (res) => {
						console.log('res定位', res);
						address.value = res.result.address
					},
					fail: (error) => {
						console.error(error);
					},
				})
			},
			fail:(error)=>{
				console.log('error',error);
			}
		});


		setTimeout(() => {
			let dom = query.select(".tabTopItem");
			dom.boundingClientRect((data) => {
				itemWidth.value = data.width + 20
			}).exec();
		}, 2000)
	})
</script>

<style lang="scss">
	.search-left,
	.search-right {
		width: 44rpx;
		height: 44rpx;
		flex: 0 0 44rpx;
		line-height: 44rpx;
		text-align: center;
	}

	.icon-size {
		font-size: 32rpx;
	}

	.search-center {
		background-color: #f4f4f4;
		height: 60rpx;
		line-height: 60rpx;
		text-indent: 20rpx;
		border-radius: 30rpx;
		color: #666;
		font-size: 28rpx;
	}

	// .title-wrapper {
	// 	  white-space: nowrap;
	// }
	// .title-view {
	// 	display: inline-block;
	// }


	.title-container {
		width: 100%;
		height: 80rpx;
		line-height: 88rpx;
		font-size: 32rpx;
	}



	
</style>